<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蛋糕</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 18px;
        margin: 0 auto;
      }

      a {
        text-decoration: none;
      }

      li {
        list-style: none;
      }

      p {
        margin: 5px 0 5px 0;
        font-size: 10px;
      }

      #APP {
        background: rgb(245, 245, 245);
        width: 100%;
        height: 5000px;
      }

      .A {
        background-color: rgb(255, 255, 255);
        position: fixed;
        top: 0;
        width: 100%;
        height: 70px;
        z-index: 1;
      }

      .fontse a {
        color: rgba(140, 140, 140, 0.7);
      }

      .fontse1 a {
        color: rgba(140, 140, 140, 0.7);
      }

      .fontse1 {
        color: rgba(140, 140, 140, 0.7);
      }

      .fontse1 a:hover {
        color: rgba(12, 10, 10, 0.7);
      }

      .fontse1:hover {
        color: rgba(12, 10, 10, 0.7);
      }

      .fontse2 a {
        color: rgba(140, 140, 140, 0.7);
      }

      .fontse2 {
        color: rgba(140, 140, 140, 0.7);
      }

      .fontse2 a:hover {
        color: rgba(12, 10, 10, 0.7);
      }

      .fontse2:hover {
        color: rgba(12, 10, 10, 0.7);
      }

      .b {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .b li {
        flex: 1;
        list-style: none;
        text-align: center;
        height: 70px;
        line-height: 70px;
      }

      .fontse1 {
        border-right: 1px gainsboro solid;
      }

      .fontse2 {
        border-right: 1px gainsboro solid;
      }

      .fontse2:hover {
        border-top: 3px #ffe32a solid;
      }

      .b .kong {
        flex: 0 0 15%;
      }

      .b .kong1 {
        flex: 0 0 30%;
      }

      .b-2 {
        width: 20px;
        height: 20px;
      }

      .B {
        margin: 0 auto;
        position: relative;
        top: 90px;
        width: 1200px;
        height: 100px;
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }


      .Bb {
        padding: 12px;
      }

      .Bb a {
        color: rgba(0, 0, 0, 0.9);
      }

      .aa {
        padding: 0 20px 0 20px;
      }

      .aa1 {
        padding: 20px;
      }

      .aa-1 {
        padding: 0 25px 0 28px;
      }

      .aa-11 {
        padding: 0 20px 0 20px;
        width: 25px;
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aa:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aa-1:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aa:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aa-1:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aaa {
        padding: 0 20px 0 20px;
      }

      .aaaa {
        padding: 0 20px 0 20px;
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aaa:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }

      .aaa:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }


      /* 蛋糕列表 */
      .list-content {
        width: 100%;
        display: flex;
        padding-top: 80px;
        padding-bottom: 30px;
        background: #f5f5f5;
        border-top: 1px solid #e8e8e8;
      }

      .list-box {
        width: 1280px;
        /* border: 1px solid red; */
        margin: 0 auto;
      }
      .list-content li {
        color: black;
      }
      .item {
        display: inline;
        width: 300px;
        height: 400px;
        float: left;
        padding-top: 10px;
        text-align: center;
        /* border: 1px solid red; */
      }

      .item-list img {
        width: 289px;
        height: 289px;
      }

      .item p {
        width: 300px;
        height: 10px;
      }

      .car1 {
        width: 32px;
        height: 30px;
        margin-left: 20px;
        vertical-align: middle;
      }

      .price {
        width: 60px;
        display: inline;
        font-size: 19px;
        color: #000;
      }

      .ewm {
        display: none;
      }

      .weixin:hover + .ewm {
        position: relative;
        left: 100px;
        width: 150px;
        height: 150px;
        display: block;
      }

      a {
        text-decoration: none;
        color: white;
      }

      .footer {
        background-color: black;
        margin-top: 50px;
        font-size: 16px;
        width: 100%;
        height: 500px;
      }

      .footer h3 {
        color: rgb(210, 210, 210);
      }

      .footer-cont {
        width: 1280px;
        padding-top: 30px;
        margin: 0 auto;
      }

      .footer-top div {
        float: left;
      }

      .footer-left {
        width: 320px;
        padding-left: 100px;
      }

      .foot-logo {
        margin-bottom: 5px;
      }

      .footer-right {
        width: 800px;
        margin-left: 50px;
      }

      .right-top {
        display: flex;
        width: 800px;
        justify-content: space-between;
        text-align: center;
      }

      .about {
        flex: 15%;
      }

      .help {
        flex: 15%;
      }

      .find {
        flex: 15%;
      }

      .left-p a {
        font-size: 15px;
        color: rgb(156, 156, 156);
      }

      .left-p p {
        font-size: 15px;
        margin: 3px;
        color: rgb(156, 156, 156);
      }

      .about a {
        font-size: 15px;
        color: rgb(156, 156, 156);
      }

      .help a {
        font-size: 15px;
        color: rgb(156, 156, 156);
      }

      .find a {
        font-size: 15px;
        color: rgb(156, 156, 156);
      }

      .wei {
        flex: 50%;
      }

      .weixin {
        padding-left: 10px;
      }

      .weibo {
        padding-right: 10px;
      }

      .footer-bottom {
        padding-top: 230px;
        margin: 0 auto;
        width: 1280px;
      }

      .right-bot {
        width: 1250px;
        height: 200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .right-bot div {
        float: left;
      }

      .bot-p1 {
        width: 420px;
        margin-left: 80px;
      }

      .bot-p1 p {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .bot-p1 a {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .bot-p2 {
        width: 480px;
        margin-left: 130px;
        margin-right: 130px;
      }

      .bot-p2 p {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .bot-p2 a {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .bot-p3 {
        width: 420px;
      }

      .bot-p3 p {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .bot-p3 a {
        color: rgb(156, 156, 156);
        font-size: 12px;
      }

      .copyright {
        width: 1000px;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        color: rgb(156, 156, 156);
      }

      .copyright a {
        font-size: 12px;
        color: rgb(156, 156, 156);
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!--顶部导航栏-->
      <div class="A">
        <ul class="b">
          <li class="kong">
            <a href="#"><img src="./img/logo.png" alt="" /></a>
          </li>
          <li class="fontse1"><a href="#">上海市</a></li>
          <li class="fontse2"><a href="#">所有产品</a></li>
          <li class="fontse2" style="border-top: 3px #ffe32a solid">
            <a href="#">蛋糕</a>
          </li>
          <li class="fontse2"><a href="#">面包</a></li>
          <li class="fontse2"><a href="snack.html">小食</a></li>
          <li class="fontse2"><a href="#">企业专区</a></li>
          <li class="kong1"></li>
          <li class="fontse1" style="border-left: 1px gainsboro solid">
            <a href="#" style="width: 50px;">注册</a>|<a href="#" style="width: 50px;">登录</a>
          </li>
          <li class="fontse1">
            <a href="ShoppingCart.html"><img class="b-2" src="./img/bag1.png" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="./img/icon02.png" alt="" /></a>
          </li>
        </ul>
      </div>
      <div class="B">
        <div class="BB">
          <div class="Bb">
            <span class="aa1">场景:</span>
            <a href="#" class="aa-11">全部</a>
            <a href="#" class="aa-1">生日</a>
            <a href="#" class="aa">聚会</a>
            <a href="#" class="aa">情侣</a>
            <a href="#" class="aa-1">儿童</a>
            <a href="#" class="aa-1">长辈</a>
          </div>
          <div class="Bb">
            <span class="aa1">口味:</span>
            <a href="#" class="aaaa">全部</a>
            <a href="#" class="aaa">拿破仑</a>
            <a href="#" class="aaa">奶油</a>
            <a href="#" class="aaa">慕斯</a>
            <a href="#" class="aaa">芝士</a>
            <a href="#" class="aaa">巧克力</a>
            <a href="#" class="aaa">咖啡</a>
            <a href="#" class="aaa">坚果</a>
            <a href="#" class="aaa">水果</a>
            <a href="#" class="aaa">冰淇淋</a>
          </div>
        </div>
      </div>

      <div class="list-content">
        <div class="list-box">
          <div class="list-ul">
            <ul v-for="(d,index) in dg" :key="d.id">
              <div class="item">
                <a href="#">
                  <div class="item-list">
                    <a :href="'shangpinxiangxi.html?id=' +d.id"><img :src="getImgUrl(d.img)" alt="" /></a>
                  </div>
                  <span v-model="d.name" :value="d.name"><a :href="'shangpinxiangxi.html?id=' +d.id" style="color: #000;">{{d.name}}</a></span>
                  <span v-model="d.id" style="padding: 2px 4px; background-color: #ffe32a; border-radius: 5px;">{{d.type.t_type}}</span>
                  <span v-model="d.name" style="padding: 2px 4px; background-color: #ffe32a; border-radius: 5px;">{{d.fl.cf}}</span>
                </a>
                <p style="color: #7a7a7a;">{{d.english}}</p>
                <p>
                  <li class="price" v-model="d.price">￥{{d.price}}</li>
                  <button @click="showadd"><img class="car1" src="./img/car1.png" alt=""></button>
                  <div v-if="showAdd">
                    <div style="width: 100px;height: 100px;background-color: #ffe32a;">
                      <button @click="add(d)" style="border: none;">
                        <a href="#" style="border: none;">
                        <img class="car1" src="./img/car1.png" alt=""/>
                      </a>
                      </button>
                      <button @click="closeWindow">X</button>
                    </div>
                  </div>
                </p>
              </div>
            </ul>
          </div>
        </div>
      </div>

      <!--蛋糕-->
      </div>
      <div class="footer">
        <div class="footer-cont">
          <div class="footer-top">
            <div class="footer-left">
              <div class="foot-logo">
                <img src="./img/logo1.png" />
                <div class="left-p">
                  <p>订购热线:4006-678-678(8:00 - 20:00)</p>
                  <p>客服邮箱:cs@mcake.com</p>
                  <p>地址:上海市普陀区同普路1130弄3号楼</p>
                  <p class="gov-p">
                    <a
                      href="//static.mcake.com/file/5ef5931c2226a424/c9907a053fdbcab9.jpg"
                      target="_blank"
                      >食品生产许可证：SC12431010700121</a
                    >
                  </p>
                </div>
              </div>
            </div>

            <div class="footer-right">
              <div class="right-top">
                <div class="about">
                  <h3>关于我们</h3>
                  <p><a href="/page/about" title="企业介绍">企业介绍</a></p>
                  <p><a href="/page/media" title="媒体合作">媒体合作</a></p>
                  <p><a href="/article/id/61">招贤纳士</a></p>
                  <p><a href="/article/id/47">呼叫中心</a></p>
                </div>
                <div class="help">
                  <h3>帮助中心</h3>
                  <p>
                    <a href="/page/advice" title="投诉与建议">投诉与建议</a>
                  </p>
                  <p><a href="/page/member" title="会员权益">会员权益</a></p>
                  <p><a href="/page/shopping" title="购物指南">购物指南</a></p>
                  <p><a href="/article/id/57">支付类</a></p>
                  <p><a href="/article/id/56">订单相关</a></p>
                  <p><a href="/page/maps">配送服务</a></p>
                </div>
                <div class="find">
                  <h3>发现</h3>
                  <p><a href="/article/id/65">公告</a></p>
                </div>
                <div class="wei">
                  <a href="http://weibo.com/mcake1893" target="_blank">
                    <img
                      title="关注微博"
                      alt="新浪微博"
                      class="weibo"
                      src="./img/weibo.png"
                    />
                  </a>
                  <img
                    title="关注公众号"
                    alt="微信公众号"
                    class="weixin"
                    src="./img/weixin.png"
                  />
                  <img class="ewm" src="./img/erw.jpg" />
                </div>
              </div>
            </div>
          </div>

          <div class="footer-bottom">
            <div class="right-bot">
              <div class="bot-p1">
                <p>上海卡法电子商务有限公司</p>
                <p>地址：上海市普陀区同普路1130弄3号楼</p>
                <p>洽谈电话：021-52691591</p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/45bd630382f3722e/1e072161a0cfb0f3.jpg"
                    target="_blank"
                    >社会信用代码：913101070678091460</a
                  >
                </p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/9cf52502c183b213/64537636f9b040f8.jpg"
                    target="_blank"
                    >食品经营许可证：JY13101070034251</a
                  >
                </p>
              </div>
              <div class="bot-p2">
                <p>上海卡法电子商务有限公司北京分公司</p>
                <p>地址：北京市朝阳区望京西路甲50号1号楼6层1-08内606单元</p>
                <p>洽谈电话：010-64720188</p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/fff42d8b8ff23356/56acc718c877.jpg"
                    target="_blank"
                    >社会信用代码：911101053484280752</a
                  >
                </p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/fff42d8b8ff23356/39408cbe5632.jpg"
                    target="_blank"
                    >食品经营许可证：JY11105262932938</a
                  >
                </p>
              </div>
              <div class="bot-p3">
                <p>上海卡法电子商务有限公司杭州分公司</p>
                <p>地址：杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                <p>洽谈电话：0571-28103688</p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/0892df100e0f3c76/09c369ed881ad213.jpg"
                    target="_blank"
                    >社会信用代码：913301060920344424</a
                  >
                </p>
                <p class="gov-p">
                  <a
                    href="//static.mcake.com/file/233aaf781606c528/4e3cc903c472f0d1.jpg"
                    target="_blank"
                    >食品经营许可证：JY13301050141226</a
                  >
                </p>
              </div>
            </div>

            <p class="copyright">
              Copyright © 2012-2023 上海卡法电子商务有限公司 版权所有 l
              <a href="http://beian.miit.gov.cn" target="_blank"
                >沪ICP备12022075号</a
              >
              l
              <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010702005582"
                target="_blank"
                >沪公网安备31010702005582号</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          dg: [],
          ds:{},
          d: {
                id: "",
                name: "",
                type_id:"",
                kg: "",
                img: "",
                img2:"",
                img3:"",
                price: "",
                date: "",
                cf_id:"",
                english:""
                // type:{
                //   id:"",
                //   t_type:""
                // },
                // fl:{
                //   id:"",
                //   cf:""
                // }
            },
          showAdd:false,
          file: null,
          filename: "up.webp"
        },
        created() {
          this.StuN();
        },
        // mounted(){
        //   axios
        //         .get("http://127.0.0.1:1234/Type/type")
        //         .then((response) => {
        //             this.type = response.data;
        //             console.log(this.type)
        //         })
        // },
        methods: {
          /**显示*/
          StuN() {
            axios
              .post("http://127.0.0.1:1234/Dg/search", this.d)
              .then((response) => {
                if(this.d.id = 1){
                this.dg = response.data;
              }else{
                alert("暂无商品上架！")
              }
                console.log(this.dg);
              });
          },
          // Fl(){
          //   axios
          //       .get("http://127.0.0.1:1234/Fl/cf")
          //       .then((response) => {
          //           this.fl = response.data;
          //           console.log(this.fl)
          //       })
          // },
          getImgUrl(name){
            return "/image/"+name
          },
          showadd(){
            this.showAdd = true;
          },
          closeWindow(){
            this.showAdd = false;
          },
          /**图片上传*/
          selectFile(event){
            console.log(event)
            this.file = event.targent.files[0]
          },

          /**添加*/
          add(d){
            axios
              .post(`http://127.0.0.1:1234/Dg`, d)
                    .then((response) => {
                        if (response.data === 1) {
                            alert("添加到购物车成功！");
                        }
                    })
                    .catch((err) => {
                        alert(err);
                    });
          },

          upfile(event){
            let formdata = new FormData()
            formdata.append('file',this.file)
            axios
              .post('http://127.0.0.1:1234/upfile/photo',formdata,{
                "Content-type": "multipart/form-data",
              })
              .then((res) => {
                this.filename = res.data;
                console.log(res.data)
              })
          },
          
        },
        
      });

    </script>
  </body>
</html>
